<template>
    <div>
        <web-header show="outbound" />
        <div class="top">
            <div class="topbox">
                <div class="topnav">
                    <!-- <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/year.png" /> -->
                    <img src="https://admin.hqx.com.cn/Public/App/image/year (2).png" />
                    <div class="navlist">
                        <div class="listbox">
                            <h1>亚洲</h1>
                            <ul>
                                <li><router-link target="_blank" to="/line/55">东南亚</router-link></li>
                                <li><router-link target="_blank" to="/line/102">日本</router-link></li>
                                <li><router-link target="_blank" to="/line/86">泰国</router-link></li>
                                <li><router-link target="_blank" to="/line/84">新加坡</router-link></li>
                                <li><router-link target="_blank" to="/line/97">南亚</router-link></li>
                                <li><router-link target="_blank" to="/line/455">中亚</router-link></li>
                                <li><router-link target="_blank" to="/line/521">高加索</router-link></li>
                                <div class="clearfix"></div>
                            </ul>
                        </div>
                        <div class="listbox">
                            <h1>欧洲</h1>
                            <ul>
                                <li><router-link target="_blank" to="/line/34">北欧</router-link></li>
                                <li><router-link target="_blank" to="/line/">英国</router-link></li>
                                <li><router-link target="_blank" to="/line/291">冰岛</router-link></li>
                                <li><router-link target="_blank" to="/line/">北极</router-link></li>
                                <li><router-link target="_blank" to="/line/20">俄罗斯</router-link></li>
                                <li><router-link target="_blank" to="/line/">希腊</router-link></li>
                                <li><router-link target="_blank" to="/line/">德国</router-link></li>
                                <div class="clearfix"></div>
                            </ul>
                        </div>
                        <div class="listbox" style="margin-top:3px;">
                            <h1>美洲</h1>
                            <ul>
                                <!-- 美国 加拿大  南美 巴西  阿根廷  秘鲁  智利  南极 -->
                                <li><router-link target="_blank" to="/line/46/">美国</router-link></li>
                                <li><router-link target="_blank" to="/line/47/">加拿大</router-link></li>
                                <li><router-link target="_blank" to="/line/7">南美</router-link></li>
                                <li><router-link target="_blank" to="/line/43">巴西</router-link></li>
                                <li><router-link target="_blank" to="/line/45">阿根廷</router-link></li>
                                <li><router-link target="_blank" to="/line/42">秘鲁</router-link></li>
                                <li><router-link target="_blank" to="/line/44">智利</router-link></li>
                                <div class="clearfix"></div>
                            </ul>
                        </div>

                        <div class="listbox" style="margin-top:3px;">
                            <h1>中东非</h1>
                            <ul>
                                <!-- 埃及 南非 坦桑尼亚  摩洛哥 突尼斯  肯尼亚 土耳其  -->
                                <li><router-link target="_blank" to="/line/111">埃及</router-link></li>
                                <li><router-link target="_blank" to="/line/110">南非</router-link></li>
                                <li><router-link target="_blank" to="/line/295">摩洛哥</router-link></li>
                                <li><router-link target="_blank" to="/line/107">土耳其</router-link></li>
                                <li><router-link target="_blank" to="/line/108">迪拜</router-link></li>
                                <li><router-link target="_blank" to="/line/109">毛里求斯</router-link></li>
                                <div class="clearfix"></div>
                            </ul>
                        </div>

                        <div class="listbox" style="margin-top:3px;">
                            <h1>澳洲</h1>
                            <ul>
                                <!-- 澳大利亚  新西兰 马尔代夫 斯里兰卡 -->
                                <li><router-link target="_blank" to="/line/61">澳大利亚</router-link></li>
                                <li><router-link target="_blank" to="/line/62">新西兰</router-link></li>
                                <li><router-link target="_blank" to="/line/246">马尔代夫</router-link></li>
                                <li><router-link target="_blank" to="/line/177">斯里兰卡</router-link></li>
                                <div class="clearfix"></div>
                            </ul>
                        </div>
                        <!-- <div class="listbox" style="margin-top:3px;">
                            <h1>海岛</h1>
                            <ul>
                                <li><router-link target="_blank" to="/line/93/">普吉岛</router-link>
                                </li>
                                <li><router-link target="_blank" to="/line/91/">巴厘岛</router-link>
                                </li>
                                <li><router-link target="_blank" to="/line/246/">马尔代夫</router-link>
                                </li>
                                <div class="clearfix"></div>
                            </ul>
                        </div> -->
                    </div>
                </div>
                <!-- 图 -->
                <div class="accordion">
                    <ul>
                        <li @mouseenter="accEnter(0)" :class="accordion == 0 ? 'item1 active' : 'item1'">
                            <router-link target="_blank" to="/line/93/"></router-link>

                            <div v-if="accordion != 0"></div>
                        </li>
                        <li @mouseenter="accEnter(1)" :class="accordion == 1 ? 'item2 active' : 'item2'">
                            <router-link target="_blank" to="/line/108/"></router-link>

                            <div v-if="accordion != 1"></div>
                        </li>
                        <li @mouseenter="accEnter(2)" :class="accordion == 2 ? 'item3 active' : 'item3'">
                            <router-link target="_blank" to="/line/22/"></router-link>

                            <div v-if="accordion != 2"></div>
                        </li>
                        <li @mouseenter="accEnter(3)" :class="accordion == 3 ? 'item4 active' : 'item4'">
                            <router-link target="_blank" to="/line/61/"></router-link>

                            <div v-if="accordion != 3"></div>
                        </li>
                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>


        <div class="sale">
            <ul class="salebox">
                <li>
                    <router-link to="/details/8102" target="_blank">
                        <img class="sale-banner"
                            src="https://admin.hqx.com.cn/Public/Uploads/Travel/ctrip/line/40023835/0301d12000bpp5u2s32B2_D_520_350_Q100.jpg">
                        <div class="sale-banner-title">
                            <div>追寻极光·摩尔曼斯克</div>
                        </div>
                    </router-link>
                </li>
                <!-- <li><img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/sale.jpg"></li> -->
                <li v-for="rs in saleList" :key="rs.id">
                    <router-link target="_blank" :to="`/details/${rs.id}`">
                        <img :src="rs.pic" width="220" height="150" style="margin-bottom:5px;" class="img">
                    </router-link>
                    <h1 class="clamp-line-2">
                        <router-link target="_blank" :to="`/details/${rs.id}`">{{ rs.title }}</router-link>
                    </h1>
                    <div class="text">
                        <h2>销量：{{ rs.clicks }}</h2>
                        <!-- <p>￥<span>{{ rs.price }}</span>&nbsp;起</p> -->
                        <div class="clearfix"></div>
                    </div>
                    <div class="text">
                        <!-- <h2>销量：{{ rs.clicks }}</h2> -->
                        <p>￥<span>{{ rs.price }}</span>&nbsp;起</p>
                        <div class="clearfix"></div>
                    </div>
                    <div v-if="rs.themeArray[0]" class="theme-tip-radius">{{ rs.themeArray[0].title }}</div>
                    
                </li>

                <div class="clearfix"></div>
            </ul>
            <div class="sale_icon">
                <div class="iconbox" style="margin-left:130px;">
                    <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/sa_icon1.png">
                    <h1>金牌旅游专家</h1>
                    <h2>一对一服务与专业的导游陪您同行</h2>
                </div>
                <div class="iconbox">
                    <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/sa_icon2.png">
                    <h1>个性化行程</h1>
                    <h2>打造完美行程高端品牌一线酒店</h2>
                </div>
                <div class="iconbox">
                    <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/sa_icon3.png">
                    <h1>专业的团队</h1>
                    <h2>24小时紧急联络服务技术娴熟的司机</h2>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>

        <div class="shortimg">
            <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/short_title.png">
        </div>

        <div class="short">
            <div class="shortbox">
                <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/short_bg2.jpg">
                <div class="shortlist1">
                    <!-- <ul @mouseenter="hotChange('Hot')"
                        :class="hotIndex == 'Hot' ? 'shortlist shorthover' : 'shortlist'">
                        <li>
                            <div class="short_df">
                                <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/short_icon01.png">
                                <div class="short_title">
                                    <router-link to="/line/" target="_blank">
                                        热门推荐
                                    </router-link>
                                </div>
                            </div>

                            <div class="short_text">
                                <router-link to="/line/86">泰国</router-link>
                                <router-link to="/line/102">日本</router-link>
                                <router-link to="/line/84">新加坡</router-link>
                                <router-link to="/line/97">尼泊尔</router-link>
                                <router-link to="/line/108">迪拜</router-link>
                                <router-link to="/line/246">马尔代夫</router-link>
                                <router-link to="/line/85">马来西亚</router-link>
                                <router-link to="/line/91">巴厘岛</router-link>

                                <div class="clearfix"></div>
                            </div>
                        </li>
                    </ul> -->
                    <ul @mouseenter="hotChange('Singapore')"
                        :class="hotIndex == 'Singapore' ? 'shortlist shorthover' : 'shortlist'">
                        <li>
                            <div class="short_df">
                                <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/short_icon02.png">
                                <div class="short_title">
                                    <router-link to="/line/61?type=des" target="_blank">
                                        东南亚
                                    </router-link>
                                </div>
                            </div>

                            <div class="short_text">
                                <router-link v-for="(rs, i) in nationAsia['东南亚']" :to="`/line/${rs.id}`" :key="i">
                                    {{ rs.title }}</router-link>
                                <div class="clearfix"></div>
                            </div>

                        </li>
                    </ul>

                    <ul @mouseenter="hotChange('America')"
                        :class="hotIndex == 'America' ? 'shortlist shorthover' : 'shortlist'">
                        <li>
                            <div class="short_df">
                                <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/short_icon05.png">
                                <div class="short_title">
                                    <router-link to="/line/64?type=des" target="_blank">
                                        西亚
                                    </router-link>
                                </div>
                            </div>

                            <div class="short_text">
                                <router-link v-for="(rs, i) in nationAsia['西亚']" :to="`/line/${rs.id}`" :key="i">{{
                                    rs.title }}
                                </router-link>
                                <div class="clearfix"></div>
                            </div>
                        </li>
                    </ul>

                    <ul @mouseenter="hotChange('Australia')"
                        :class="hotIndex == 'Australia' ? 'shortlist shorthover' : 'shortlist'">
                        <li>
                            <div class="short_df">
                                <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/short_icon04.png">
                                <div class="short_title">
                                    <router-link to="/line/63?type=des" target="_blank">
                                        中亚
                                    </router-link>
                                </div>
                            </div>

                            <div class="short_text">
                                <router-link v-for="(rs, i) in nationAsia['中亚']" :to="`/line/${rs.id}`" :key="i">{{
                                    rs.title }}</router-link>

                                <div class="clearfix"></div>
                            </div>
                        </li>
                    </ul>

                    <ul @mouseenter="hotChange('Japan')"
                        :class="hotIndex == 'Japan' ? 'shortlist shorthover' : 'shortlist'">
                        <li>
                            <div class="short_df">
                                <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/short_icon03.png">
                                <div class="short_title">
                                    <router-link to="/line/62?type=des" target="_blank">
                                        南亚
                                    </router-link>
                                </div>
                            </div>

                            <div class="short_text">
                                <router-link v-for="(rs, i) in nationAsia['南亚']" :to="`/line/${rs.id}`" :key="i">{{
                                    rs.title }}</router-link>
                                <!-- <router-link :to="`/line/${rs.id}`" :key="i"></router-link> -->
                                <div class="clearfix"></div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="short_list">
                    <ul>
                        <template v-for="(key, name) in hotList" :key="name">
                            <li v-show="name == hotIndex">
                                <div class="short_right">
                                    <!-- 滑动后展示列表 -->
                                    <div v-for="(rs, index) in key" :key="index" class="rightbox">
                                        <div class="rightimg">
                                            <router-link target="_blank" :to="`/details/${rs.id}`">
                                                <img :src="rs.picture || rs.pic" width="278" height="165"
                                                    style="margin-bottom:5px;" class="img">
                                            </router-link>

                                            <p><router-link to="javascript:;" class="clamp-line-2">{{ rs.title
                                                    }}</router-link>
                                            </p>
                                        </div>
                                        <div class="right_text">
                                            <p>￥<span>{{ rs.price }}</span>&nbsp;起</p>
                                            <router-link target="_blank" :to="`/details/${rs.id}`">
                                                <input value="查看详情" type="button">
                                            </router-link>
                                            <!-- <input value="查看详情" type="button"> -->
                                            <div class="clearfix"></div>
                                        </div>
                                        <div v-if="rs.themeArray[0]" class="theme-tip-radius">{{ rs.themeArray[0].title }}</div>
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                            </li>
                        </template>

                    </ul>
                </div>
            </div>
        </div>



        <div class="landimg">
            <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/island_title.png">
        </div>

        <div class="landbox">
            <div class="langlist">
                <router-link target="_blank" to="/line/91"><img
                        src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/island01.jpg"></router-link>
                <div class="land_text">
                    <h1>巴厘岛</h1>
                    <p><router-link target="_blank"
                            to="/line/91/">浮潜、香蕉船、独木舟璃底船、乡村吉普环岛游。观赏悬崖断壁的大自然奇景—→乌鲁瓦度情人崖。</router-link>
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="langlist">
                <router-link target="_blank" to="/line/95"><img
                        src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/island02.jpg"></router-link>
                <div class="land_text" style="background-color:#ffaa3b;">
                    <h1>苏梅岛</h1>
                    <p><router-link target="_blank" to="/line/95/">香港直飞苏梅岛，曼谷航空PG豪华客机苏梅岛机场至酒店往返拼车接送丛林四驱车越野</router-link>
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="langlist">
                <router-link target="_blank" to="/line/94"><img
                        src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/island03.jpg"
                        style="float:right;"></router-link>
                <div class="land_text" style="background-color:#ff5e8f; float:left">
                    <h1>长滩岛</h1>
                    <p><router-link target="_blank" to="/line/94/">香港机场往返长滩岛，航程仅需三个小时，让您的旅程更舒适轻松，更享尊贵！</router-link></p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="langlist">
                <router-link target="_blank" to="/line/93"><img
                        src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/island04.jpg"
                        style="float:right;"></router-link>
                <div class="land_text" style="background-color:#63d897; float:left">
                    <h1>普吉岛</h1>
                    <p><router-link target="_blank"
                            to="/line/93/">日本料理、大富豪咖喱螃蟹餐、BBQ烧烤自助餐、七分醉鱼翅鲍鱼海鲜餐。攀牙湾泛舟+歌喉群岛+007岛、神仙半岛等</router-link>
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="langlist">
                <router-link target="_blank" to="/line/246">
                    <img src="https://admin.hqx.com.cn/Public/App/image/island07.jpg"></router-link>
                <div class="land_text" style="background-color:#ff9161;">
                    <h1>马尔代夫</h1>
                    <p><router-link target="_blank" to="/line/41/">马尔代夫是一个理想的度假胜地，适合蜜月旅行、家庭度假或单纯的放松之旅。</router-link>
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="langlist">
                <router-link target="_blank" to="/line/92"><img
                        src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/island06.jpg"></router-link>
                <div class="land_text" style="background-color:#9f89ff;">
                    <h1>沙巴岛</h1>
                    <p><router-link target="_blank"
                            to="/line/92/">沙庇岛浮潜：东姑国家公园中最整洁、优雅的岛屿，免费无限次浮潜，免费提供浮潜工具！</router-link></p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>

        <!-- 欧洲地区 -->
        <div class="warrp2">
            <div class="tittle1">
                <div class="tittle-left">
                    <h2>
                        <img src="https://admin.hqx.com.cn/Public/App/image/title-logo (1).png" />欧洲高端线路
                    </h2>
                    <p>探索欧洲奢华之旅：品味历史与现代的完美融合</p>
                </div>
                <div class="tittle-right">
                    <router-link target="_blank" to="/line/22">法国</router-link>
                    <router-link target="_blank" to="/line/27">英国</router-link>
                    <router-link target="_blank" to="/line/20">俄罗斯</router-link>
                    <router-link target="_blank" to="/line/28">葡萄牙</router-link>
                    <router-link target="_blank" to="/line/34">挪威</router-link>
                    <router-link target="_blank" to="/line/291">冰岛</router-link>
                </div>
            </div>
            <div class="box1">
                <ul class="box-left">
                    <li v-for="rs in europeList" :key="rs.id" style="width: 295px" class="post-re">
                        <router-link target="_blank" :to="`/details/${rs.id}`">
                            <img :src="rs.picture" /></router-link>
                        <h3 class="clamp-line-1">{{ rs.title }}</h3>
                        <p>
                            <span>￥{{ rs.price }}元/人起</span>
                        </p>
                        <div v-if="rs.themeArray[0]" class="theme-tip-radius">{{ rs.themeArray[0].title }}</div>
                    </li>
                </ul>
                <div class="box-nav" style="padding: 20px 0 12px 20px">
                    <h3>
                        <router-link target="_blank" :to="`/line/67?type=des`"> 西欧 </router-link>
                    </h3>
                    <ul>
                        <li v-for="(rs, index) in nationEurope['西欧']" :key="index">
                            <router-link target="_blank" :to="`/line/${rs.id}`">
                                {{ rs.title }}
                            </router-link>
                        </li>
                    </ul>
                    <h3>
                        <router-link target="_blank" :to="`/line/66?type=des`"> 东欧 </router-link>
                    </h3>
                    <ul>
                        <li v-for="(rs, index) in nationEurope['东欧']" :key="index">
                            <router-link target="_blank" :to="`/line/${rs.id}`">
                                {{ rs.title }}
                            </router-link>
                        </li>
                    </ul>

                    <h3>
                        <router-link target="_blank" :to="`/line/68?type=des`"> 南欧 </router-link>
                    </h3>
                    <ul>
                        <li v-for="(rs, index) in nationEurope['南欧']" :key="index">
                            <router-link target="_blank" :to="`/line/${rs.id}`">
                                {{ rs.title }}
                            </router-link>
                        </li>
                    </ul>
                    
                    <h3>
                        <router-link target="_blank" :to="`/line/65?type=des`"> 北欧 </router-link>
                    </h3>
                    <ul>
                        <li v-for="(rs, index) in nationEurope['北欧']" :key="index">
                            <router-link target="_blank" :to="`/line/${rs.id}`">
                                {{ rs.title }}
                            </router-link>
                        </li>
                        <!-- <li>
                            <router-link target="_blank" to="/line/113">
                                黄山
                            </router-link>
                        </li> -->
                    </ul>

                </div>
            </div>
        </div>

        <div class="over">
            <div class="overbox">
                <div class="overnav">
                    <h1>遍游海外</h1>
                    <ul>
                        <!-- <li @mouseenter="overseasChange('Europe')" :class="overseasIndex == 'Europe' ? 'overspan' : ''">
                            <span>欧洲</span>
                        </li> -->
                        <li @mouseenter="overseasChange('America', '美洲')"
                            :class="overseasIndex == 'America' ? 'overspan' : ''">
                            <span>美洲</span>
                        </li>
                        <li @mouseenter="overseasChange('Australia', '大洋洲')"
                            :class="overseasIndex == 'Australia' ? 'overspan' : ''">
                            <span>澳洲</span>
                        </li>
                        <li @mouseenter="overseasChange('island', '海岛')"
                            :class="overseasIndex == 'island' ? 'overspan' : ''">
                            <span>海岛</span>
                        </li>
                        <li @mouseenter="overseasChange('Africa', '非洲')"
                            :class="overseasIndex == 'Africa' ? 'overspan' : ''">
                            <span>中东非</span>
                        </li>

                        <div class="clearfix"></div>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="over_list">
                    <!-- <div class="city-tabs">
                        二级目的地
                    </div> -->
                    <div class="foreign-citys" style="margin-top: 12px;">
                        <div v-for="rs in lineAreas[areasName]" class="foreign-city-item">
                            <router-link to="/line/41">
                                <div class="foreign-city-item-title">{{ rs.title }}</div>
                                <div class="English-name">{{ rs.English }}</div>
                            </router-link>
                        </div>
                    </div>
                    <ul>
                        <template v-for="(key, name) in overseas" :key="name">
                            <li v-if="name == overseasIndex">
                                <div class="overlist">
                                    <div class="overlist1">
                                        <router-link target="_blank" :to="`/line/${overseasImgs[name].id}`">
                                            <img :src="overseasImgs[name].pic">
                                        </router-link>
                                    </div>
                                    <div v-for="(rs, index) in key" :key="rs.id" class="overlist2">
                                        <div class="overimg">
                                            <router-link target="_blank" :to="`/details/${rs.id}`">
                                                <img :src="rs.picture || rs.pic" width="285" height="160"
                                                    style="margin-bottom:5px;" class="img"></router-link>
                                            <p>￥<span>{{ rs.price }}</span>&nbsp;起</p>
                                        </div>
                                        <div class="over_text2">
                                            <h1><router-link :to="`/details/${rs.id}`" class="clamp-line-1">
                                                    {{ rs.title }}</router-link>
                                            </h1>
                                            <h2>销量：{{ rs.clicks }}</h2>
                                            <h3>{{ rs.cityArray[0].title }}出发</h3>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div v-if="rs.themeArray[0]" class="theme-tip-radius">{{ rs.themeArray[0].title }}</div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </li>
                        </template>
                    </ul>
                </div>
            </div>
        </div>

        <div class="ser">
            <div class="serbox">
                <h1>旅行服务</h1>
                <div class="serlist">
                    <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/service01.png">
                    <h2>出境WIFI/电话卡</h2>
                    <h3>随身WiFi，随时随地分享，方便携带</h3>
                    <div class="clearfix"></div>
                </div>
                <div class="serlist">
                    <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/service02.png">
                    <h2>签证</h2>
                    <h3>专业顾问一对一服务，出签成功率99.8%</h3>
                    <div class="clearfix"></div>
                </div>
                <div class="serlist" style="margin-right:0;">
                    <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/service03.png">
                    <h2>保险</h2>
                    <h3>买一份保险，买一份保障和安心</h3>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>

        <div class="tra" style="display:none;">
            <div class="trabox">
                <h1>旅行游记</h1>
                <h2>这个世界真的很美，需要你用眼睛去发现，用心灵去感受。</h2>
                <div class="tralist">
                    <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/travels01.png">
                    <h3>Ealls</h3>
                    <p>人生最好的旅行，就是你在一个陌生的地方，发现一种久违的感动。</p>
                    <input type="button" value="个人出游">
                </div>
                <div class="tralist">
                    <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/travels01.png">
                    <h3>Ealls</h3>
                    <p>人生最好的旅行，就是你在一个陌生的地方，发现一种久违的感动。</p>
                    <input type="button" value="个人出游">
                </div>
                <div class="tralist">
                    <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/travels01.png">
                    <h3>Ealls</h3>
                    <p>人生最好的旅行，就是你在一个陌生的地方，发现一种久违的感动。</p>
                    <input type="button" value="个人出游">
                </div>
                <div class="tra_more">
                    <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/travels_more.png">
                </div>
                <div class="tralist">
                    <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/travels01.png">
                    <h3>Ealls</h3>
                    <p>人生最好的旅行，就是你在一个陌生的地方，发现一种久违的感动。</p>
                    <input type="button" value="个人出游">
                </div>
                <div class="tralist">
                    <img src="https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/travels01.png">
                    <h3>Ealls</h3>
                    <p>人生最好的旅行，就是你在一个陌生的地方，发现一种久违的感动。</p>
                    <input type="button" value="个人出游">
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <web-footer />
        <back-top />
    </div>
</template>

<script setup>



import { ref, reactive, onMounted, computed } from "vue";
import { index_banner, line_items, theme_items } from "@/api/travel";
import lineDomestic from "@/assets/dictionaries/lineAreasDomestic.js";
import nationEurope from '@/assets/dictionaries/nationEurope.js';
import lineAreas from '@/assets/dictionaries/lineAreasForeign.js';
import nationAsia from '@/assets/dictionaries/nationAsia.js';



// line_items 简化
let getItem = async (ids, limit = 10) => {
    let res = await line_items({
        ids,
        limit
    });

    return res.data;
};

let getItemArea = async (area, limit = 6) => {
    let res = await line_items({
        area,
        limit
    });

    return res.data;
};
let getItemDes = async (des, limit = 6) => {
    let res = await line_items({
        des,
        limit
    });

    return res.data;
};

let accordion = ref(0);
const accEnter = (index) => {
    accordion.value = index;
}

// 热售
let saleList = ref([]);
let getSaleList = async () => {
    let data = await getItem("4954,7950,7737,7994");
    saleList.value = data;
};

// 热门推荐 图片懒加载
let hotList = ref({});
// 请求热门数据
let getHotList = async () => {
    // let Hot = await getItem("8026,8097,7554,8163,7910,8113");
    let Singapore = await getItem("8092,8101,8162,7921,7563,8608");
    let Japan = await getItem("7560,7440,8094,7926,7949,7948");
    let Australia = await getItem("7906,7818,7471,7809,7446,7449");
    let America = await getItem("7868,7884,7853,8121,8116,8115");
    hotList.value = {
        // Hot,
        Singapore,
        Japan,
        Australia,
        America
    };
};
// 热门推荐下标
let hotIndex = ref('Singapore');
// 切换函数
let hotChange = async (index) => {
    hotIndex.value = index;
};


// 亚洲


// 欧洲
const europeList = ref([]);

let getEuropeList = async () => {
    let data = await getItem('7633,8031,8442,8423,8636,8381');
    europeList.value = data;
};



// 海外
let overseas = ref({});
let overseasImgs = {
    Europe: { id: 15, pic: 'https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/a.jpg' },
    America: { id: 46, pic: 'https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/b.jpg' },
    Australia: { id: 61, pic: 'https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/a.jpg' },
    Africa: { id: 85, pic: 'https://admin.hqx.com.cn/Public/Wwwszcitscn/images/chujing/c.jpg' },
    island: { id: 91, pic: "https://admin.hqx.com.cn/Public/App/image/chujing-island.png" },
}
// 海外列表
let getOverseas = async () => {
    // let Europe = await getItemDes('9');
    let America = await getItemDes('10');
    let Australia = await getItemDes('12');
    let Africa = await getItemDes('11');
    let island = await getItem('8051,8098,7230,7903,7930,7794');
    overseas.value = {
        // Europe,
        America,
        Australia,
        Africa,
        island,
    };
};

// 海外推荐下标
let overseasIndex = ref('America');
let areasName = ref("美洲");
// 海外推荐切换
let overseasChange = async (index, title) => {
    overseasIndex.value = index;
    areasName.value = title;
};





onMounted(async () => {
    await getSaleList();
    await getHotList();
    await getOverseas()
    await getEuropeList()

});

</script>


<style lang="scss" scoped>
@import "../../css/main_chujing.css";
</style>